<script lang="ts" setup>
defineOptions({
  name: getDefineName(nationalRoute.path),
});
import { nationalRoute } from "@/router";
import { fetchArticleList } from "../home/store";
import { isShowTopUp } from "@/config/ads_ids";

let totalViewData = ref<any>([]);
async function fetchNationalList() {
  let resData = await fetchArticleList();
  totalViewData.value = [...totalViewData.value, ...resData.data.rows];
  nextTick(() => {
    unobserveAllItems();
    observeAllItems();
    scrollElementTopUp("instant", homeItemListRef.value.$el);
  });
}

onMounted(async () => {
  isFixed.value = true;
  fetchNationalList();
});
let observerNationalList = new IntersectionObserver((entries) => {
  entries.forEach(async (entry: any) => {
    let target = entry.target;
    if (entry.isIntersecting === true) {
      let index = target.dataset.index * 1;
      let exposureTimes = target.getAttribute("exposure-times");
      if (index >= 2) {
        isShowTopUp.value = true;
      } else {
        isShowTopUp.value = false;
      }
      if (isEmptyType(exposureTimes)) {
        target.setAttribute("exposure-times", 1);
      }
      if (!isEmptyType(exposureTimes)) {
        return;
      }
      if (index % (totalViewData.value.length - 2) === 0 && index != 0) {
        fetchNationalList();
      }
    }
  });
});

function unobserveAllItems() {
  [].forEach.call(homeItemListRef.value.$el.children, (element) => {
    observerNationalList.unobserve(element);
  });
}
function observeAllItems() {
  [].forEach.call(homeItemListRef.value.$el.children, (element) => {
    observerNationalList.observe(element);
  });
}
let homeItemListRef = ref<any>(null);
let isFixed = ref(false);
</script>
<template>
  <div class="national">
    <HomeScrollXTabs :isFixed="isFixed" />
    <HomeItemList
      class="pl-16 pr-16 pt-10"
      v-model:view-data="totalViewData"
      ref="homeItemListRef"
    />
  </div>
</template>
<style lang="scss" scoped>
.national {
}
</style>
